<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src=http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js></script>
		<script src="/socket.io/socket.io.js"></script>
		<script src="/nowjs/now.js"></script>
		<script>
		/*
		  var socket = io.connect('http://127.0.0.1:8000/');
		  socket.on('news', function (data) {
		    console.log(data);
		    socket.emit('my other event', { my: 'data' });
		  });		
*/


function Stock( name, value, price ){
	var self = this;
	self.name = name;
	self.value = value;
	self.price = price;
}    

function AppViewModel (){

	var self = this;
	this.name=ko.observable("Name");
	this.stockname=ko.observable("Stockname");
	this.quantity=ko.observable("Quantity");

	this.stocks=ko.observableArray([]);
};

	var viewModel = new AppViewModel();

	now.ready(function(){
		ko.applyBindings(viewModel);
	});


	now.onConnected = function( stocks ){
		for ( var i = 0; i < stocks.length; i++ ){
			viewModel.stocks.push( new Stock( stocks[i].name, stocks[i].noOfShares, stocks[i].shareValue ) );	
		}							
	};


/*
viewModel= {
	money:ko.observable(1000),
	buyStocks:function() {
		var previousMoney=this.money();
		this.money(previousMoney-(now.initialData[i].price*ko.observable("Quantity")));
	}
};
	*/
			
</script>		



	</head>
	
	<body>
		<p>Stock exchange</p>
<!--		<p>Name: <input data-bind="value: name"/></p>	
		<p>Name: <strong data-bind="text: name"></strong></p> -->
		
		<marquee behavior="scroll" direction="left">
			<ul data-bind="foreach: stocks">
				<li data-bind="text: name"></li>
			</ul>
		</marquee>
		
		<p> Company: 
			
			<select data-bind ="foreach: stocks">
				<option data-bind="text: name" ></option>
			</select>
		</p>
		

		<div> Price: </div>		
				<ul data-bind="foreach: stocks">
					<li data-bind="text: price"></li>
				</ul>
				
				

		
<!--		<p>Stockname: <input data-bind="value: stockname"/> </p>
		<p>Stockname: <strong data-bind="text: stockname"></strong> </p>-->
		
<!--		<p>Quantity: <input data-bind="value: quantity"/> </p>
		<p>Quantity: <strong data-bind="text: quantity"></strong> </p>
		
		<button data-bind="click: buyStocks">Buy Stocks</button>
-->		 
		

	
	</body>
</html>
